<template>
	<view style="bottom-input">
		<!-- 底部输入框 -->
		<div class="chat_input_box" :style="{ paddingBottom:  showBoxTools ? '0' : deviceBottom + 'px' }">
			<slot name="input-top"></slot>
			<div class="chat_input">
				<image @click="clickVoice" class="voice_img"
					:src="isVoice? '/static/img/chat/jianpan.png' : '/static/img/chat/yuyin.png'" mode=""></image>
				<div class="conter_box">
					<template v-if="isVoice">
						<div class="voice_box" @touchstart="touchstartVoice" @touchmove.stop.prevent="touchmoveVoice"
							@touchend="touchendVoice" @touchcancel="touchcancelVoice">
							<text class="voice_text">{{voiceText}}</text>
						</div>
					</template>
					<template v-else>
						<textarea v-model="textareaVal" :hideDoneButton="true" @keyboard="keyboardInput"
							ref="textareaRef" :autofocus="false" @linechange="texTlinechange" class="textarea_input"
							@focus="textareaFocus" @blur="textareaBlur" type="text" :adjust-position="false" :style="{
							paddingTop:lineCount == 1 ? '24rpx' : '0rpx',
							paddingBottom:lineCount == 1 ? '17rpx' : '0rpx'
						}" />
					</template>
				</div>
				<image @click="clickEmoj(1)" class="emoj_img" src="/static/img/chat/biaoqing.png" mode="">
				</image>
				<div class="btn_box" v-if="!textareaVal.length == 0 && !isVoice" @click="clickMsg">
					<text class="btn_text">发送 </text>
				</div>
				<image v-else @click="clickEmoj(2)" class="add_img" src="/static/img/chat/add.png" mode="">
				</image>
			</div>
			<div :style="boxToolsStyles">
				<swiper :current="currentBoxTools - 1" class="fun_swiper" disable-touch>
					<swiper-item>
						<div class="swiper_item">
							<emoji-box @setEmoj="setEmoj" :emojiList="emojiList"></emoji-box>
						</div>
					</swiper-item>
					<swiper-item>
						<div class="swiper_item">
							<tool-box :menu="menu" @toolItem="toolItem"></tool-box>
						</div>
					</swiper-item>
                    <swiper-item>
                        <div class="swiper_item">
                        	<emoji-box @handleEmotionbiaoFalse="handleEmotionbiaoFalse" :imgs="true" :biaoList="biaoList" :emojiList="biaoList"></emoji-box>
                        </div>
                    </swiper-item>
				</swiper>
			</div>
		</div>
		<!-- 语音状态显示 -->
		<template v-if="voiceFlg">
			<div class="voice_bd">
				<div class="voice_ui">
					<image class="voice_ui_img" src="/static/img/chat/microphone.png"></image>
					<text class="voice_ui_text">{{voiceTis}}</text>
				</div>
			</div>
		</template>
	
	</view>
</template>

<script>
	import Chat from './minxi/chat.js'
	import ToolBox from "./tool.vue"
	import EmojiBox from "./emoj.vue"

	export default {
		props: {
			value: String,
			// 底部菜单
			menu: {
				type: Array,
				default: () => []
			},
			isSafeArea: Boolean
		},
		mixins: [Chat],
		components: { ToolBox, EmojiBox },
		watch: {
			value: {
				handler(val) {
					this.textareaVal = val || ''
				},
				immediate: true
			}
		},
        data(){
            return {
                biaoList: [
                    // '/uploads/images/gif/1.gif',
                    '/uploads/images/gif/3.gif',
                    '/uploads/images/gif/4.gif',
                    '/uploads/images/gif/6.gif',
                    '/uploads/images/gif/7.gif',
                    '/uploads/images/gif/8.jpg',
                    '/uploads/images/gif/9.gif',
                    '/uploads/images/gif/10.gif',
                    '/uploads/images/gif/11.gif',
                    '/uploads/images/gif/12.gif',
                    '/uploads/images/gif/13.gif',
                    '/uploads/images/gif/14.gif',
                    '/uploads/images/gif/16.gif',
                    '/uploads/images/gif/17.gif',
                    '/uploads/images/gif/18.gif',
                    '/uploads/images/gif/19.gif',
                    '/uploads/images/gif/20.jpg',
                    '/uploads/images/gif/21.gif',
                    '/uploads/images/gif/22.gif',
                    '/uploads/images/gif/23.jpg',
                    '/uploads/images/gif/24.jpg',
                    '/uploads/images/gif/25.gif',
                    '/uploads/images/gif/26.jpg',
                    '/uploads/images/gif/27.jpg',
                    '/uploads/images/gif/28.jpg',
                    '/uploads/images/gif/29.jpg',
                    '/uploads/images/gif/30.jpg',
                    '/uploads/images/gif/32.gif',
                    '/uploads/images/gif/33.gif',
                    '/uploads/images/gif/34.jpg',
                    '/uploads/images/gif/35.gif',
                    '/uploads/images/gif/36.gif',
                    '/uploads/images/gif/37.gif',
                    '/uploads/images/gif/38.gif',
                    '/uploads/images/gif/39.gif',
                    '/uploads/images/gif/40.gif',
                    '/uploads/images/gif/41.gif',
                    '/uploads/images/gif/42.gif',
                    '/uploads/images/gif/43.gif',
                    '/uploads/images/gif/44.jpg',
                    '/uploads/images/gif/45.jpg',
                    '/uploads/images/gif/46.gif',
                    '/uploads/images/gif/47.gif',
                    '/uploads/images/gif/48.gif'
                ],
            }
	},
    
    }
</script>

<style>
    .fles{
        
    }
    .emotion-box {
        margin: 0 auto;
        width: calc(100% - 8px);
        box-sizing: border-box;
        padding: 2px;
        overflow: hidden;
        overflow-y: auto;
    }
	.chat_input_box {
		width: 750rpx;
		background-color: #F8F8F8;
	}

	.chat_input {
		flex-direction: row;
		align-items: center;
		height: 108rpx;
	}

	.textarea_input {
		flex: 1;
		height: 82rpx;
		line-height: 45rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;
		background-color: #FFFFFF;
		border-radius: 6rpx;
		font-size: 14px;
	}

	.voice_img {
		width: 51rpx;
		height: 51rpx;
		margin-left: 30rpx;
		margin-right: 18rpx;
	}

	.emoj_img {
		width: 51rpx;
		height: 51rpx;
		margin-left: 18rpx;
		margin-right: 13rpx;
	}

	.add_img {
		width: 51rpx;
		height: 51rpx;
		margin-left: 15rpx;
		margin-right: 30rpx;
	}

	.btn_box {
		width: 112rpx;
		height: 60rpx;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
		background-color: #1E89FF;
		margin-right: 18rpx;
	}

	.btn_text {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.fun_swiper {
		flex: 1;
		background-color: #F8F8F8;
	}

	.swiper_item {
		flex: 1;
	}

	.conter_box {
		flex: 1;
		flex-direction: row;
	}

	.voice_box {
		flex: 1;
		height: 82rpx;
		background-color: #FFFFFF;
		border-radius: 6rpx;
		align-items: center;
		justify-content: center;
	}

	.voice_text {
		font-size: 32rpx;
		font-weight: 400;
		color: #161616;
	}

	/* 语音ui */
	.voice_bd {
		position: fixed;
		align-items: center;
		bottom: 400rpx;
		width: 750rpx;
		height: 400rpx;
	}

	.voice_ui {
		width: 320rpx;
		height: 360rpx;
		border-radius: 8rpx;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 8px;
	}

	.voice_ui_img {
		width: 180rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.voice_ui_text {
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.audio_box {
		width: 200rpx;
		height: 300rpx;
	}
</style>
